<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-aside class="header">
        <!-- <title-header></title-header>-->
        <div class="title-wrapper">
          <icon-font icon-class="afl-xuanze" :icon-style="{fontSize:'20px'}"></icon-font>
          {{ $t('wms.aGivenYear') }}
          <div class="year-boxs">
            <el-date-picker v-model="data.years" type="month" :placeholder="$t('wms.selectDate')"
                            @change="select(data.years)" style="width: 100%"/>
          </div>
        </div>
        <div class="year-list">
          <!--          <div class="buttons">-->
          <!--            <el-button type="warning" style="padding: 15px 20px;" >{{ $t('wms.search') }}</el-button>-->
          <!--          </div>-->
          <div class="containers">
            <el-radio-group class="check-containers"
                            v-model="data.checkedCities"
            >
              <el-radio
                v-for="item in data.monthList" @change="handleCheckedCitiesChange"
                :class="item.is_send=='Y'?'year-box2':'year-box'"
                :key="item" :label="item"
                size="large" border>{{ item }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-aside>
      <el-main>
        <production-table :tableList="data.tableList" :dayList="data.dayList"
                          :arrLength="data.arrLength" :years="data.years"
                          :weeks="data.weeks"></production-table>
      </el-main>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import processLine from '@/components/mes/common/processLine'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import { getProductionData } from '@/api/mesApi'
import productionTable from '@/components/wms/production/productionTable'
import useI18n from '@/hooks/language'

const { t } = useI18n()

const data = reactive({
  ready: false,
  years: new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '',
  monthList: [],
  checkedCities: '',
  tableList: [],
  dayList: [],
  arrLength: 0,
  weeks: []
})

// const checkedCities = ref([])
const isIndeterminate = ref(true)

onMounted(async () => {
  data.ready = true
  const week = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '-' + (new Date().getDate() - 1 < 10 ? '0' + (new Date().getDate() - 1) : (new Date().getDate() - 1))
  data.checkedCities = week
  monthList()
  getTable()
})

// 本月最后一天
const getEndTime = (a) => {
  let date = new Date()
  if (a !== undefined) {
    date = a
  }
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
  const nextMonthFirthDay = new Date(year, month, 1) // 下个月的第一天
  console.log(nextMonthFirthDay)
  const oneDay = 1000 * 60 * 60 * 24 // 一天的时间毫秒数
  const endDay = new Date(nextMonthFirthDay - oneDay)
  const day = endDay.getDate() // 本月最后一天
  return day
}

const monthList = (item) => {
  const a = getEndTime(item)
  let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
  if (item !== undefined) {
    month = item.getMonth() + 1 < 10 ? '0' + (item.getMonth() + 1) : (item.getMonth() + 1)
  }
  // else {
  //   checkedCities.value.push((month + '-' + (Number(new Date().getDate()) - 1) + ''))
  // }
  for (let i = 1; i <= a; i++) {
    const day = month + '-' + (i < 10 ? '0' + i : i) + ''
    data.monthList.push(day)
  }
}
// 选择年份加月份
const select = (monthData) => {
  // 如果不为空就执行后续操作
  console.log(monthData)
  if (monthData !== null) {
    data.years = monthData.getFullYear() + '-' + ((monthData.getMonth() + 1) < 10 ? '0' + (monthData.getMonth() + 1) : (monthData.getMonth() + 1))
  } else {
    console.log('r')
  }
  data.monthList = []
  data.checkedCities = []
  monthList(monthData)
}

// const tableClick = () => {
//   getTable()
// }

const handleCheckedCitiesChange = (value) => {
  getTable()
}

// 获取表格数据
const getTable = () => {
  data.tableList = []
  const week = [data.checkedCities]
  data.weeks = data.checkedCities
  data.arrLength = week.length
  // console.log(data.arrLength)
  getProductionData({
    year: data.years,
    week
  }).then(res => {
    const arr = res.data
    data.dayList = []
    data.tableList = []
    if (Object.keys(arr).length > 1) {
      const custom = []
      data.tableList = Object.values(arr)[0]
      data.dayList.push(Object.keys(arr)[0])
      for (var i = 1; i < Object.keys(arr).length; i++) {
        const list = Object.values(arr)[i]
        data.dayList.unshift(Object.keys(arr)[i])
        if (list !== undefined) {
          list.forEach((item, index) => {
            const a = []
            a.push(item.custom)
            if (Array.isArray(data.tableList[index].custom)) {
              // a.concat(data.tableList[index].custom)
              data.tableList[index].custom.forEach(arr => {
                a.push(arr)
              })
              // console.log(a, data.tableList[index].custom)
            } else {
              a.push(data.tableList[index].custom)
            }
            data.tableList[index].custom = a
            // console.log(data.tableList[index].custom, a)
          })
        }
      }
      console.log(data.tableList)
    } else {
      data.tableList = Object.values(arr)[0]
      data.dayList.push(Object.keys(arr)[0])
    }
  })
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
